<style scoped lang="less">

</style>
<template>
	<div class="video-wrap">
		<!-- <video id="video" class="video-term" controls playsInline webkit-playsinline autoplay>
		    <source src="rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd" type="rtmp/flv" />
		</video> -->
		<object v-if="src.substring(0,4) == 'rtsp'" type='application/x-vlc-plugin'
			id='vlc' events='True' width="568"
			height="390"
			pluginspage="http://www.videolan.org"
			codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
			<param name='mrl' :value='src' />
			<param name='volume' value='50' />
			<param name='autoplay' value='true' />
			<param name='loop' value='false' />
			<param name='fullscreen' value='true' />
		</object>
		<span v-if="src.substring(0,4) == 'rtsp'">
			第一次播放请<a  href="https://xf.wiscloud.online/uploads/ziliao/vlc-3.0.12-win32.exe" style="color: red">下载</a>插件，建议使用360浏览器，火狐浏览器以及Google浏览器可能播放失败
		</span>
		<!-- <video v-if="src" :id="'video'+index" class="video-term" playsInline webkit-playsinline autoplay muted>
			<source :src="src" type="rtmp/flv" />
		</video> -->
    	<video 
			v-if="src.substring(0,4) == 'rtmp' || src.substring(0,5) == 'https' || src.substring(0,4) == 'http'"
			:id="'video'+index" class="video-term"
			playsInline
			webkit-playsinline
			autoplay
			muted>
			<source :src="src" type="rtmp/flv" />
		</video>
		<p class="data-none" v-else-if="!loading">暂无监控视频</p>
	</div>
</template>
<script>
export default {
	name: 'deviceVideoItem',
	props: {
		index: {
			type: Number,
			default: 0
		},
		src: { // 播放地址
			type: String,
			default: ''
		}
	},
	components: {
	},
	watch: {
	},
	data () {
		return {
			loading: true,
			player: null
		}
	},
	methods: {
		onPlayerError(e){
		},
		onPlayerPlay(){
			// this.loading = false
			setTimeout(()=>{
				// this.loading = false
			},1000)
			
		},
		// onPlayerPlaying(){
		// 	this.loading = false
		// 	console.log('onPlayerPlaying')
		// },
		// onPlayerWaiting () { console.log('onPlayerWaiting') },
		// playerReadied () { console.log('playerReadied') },
		// playerStateChanged () { console.log('playerStateChanged') },
		play(){
			this.player.play()
		},
		pause(){
			this.player.pause()
		},
		initPlayer () {
			this.player = new EZuikit.EZUIPlayer('video'+this.index)
			this.player.on('play', this.onPlayerPlay)
			this.player.on('error', this.onPlayerError)
		}
	},
	mounted () {
		this.$nextTick(()=>{
            if(this.src){
                this.initPlayer()
            }
        })
	}
}
</script>